import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { isArray } from '/@/utils/is';
import { hexToRgba } from '/@/utils/utils';
import { buildUUID } from '/@/utils/uuid';
export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    align: 'left',
    ellipsis: true,
    resizable: true,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '名称',
    component: 'Input',
    colProps: { span: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'coordinate',
    label: '坐标',
    component: 'Input',
    colProps: { span: 22 },
    slot: 'coordinate',
  },
  {
    field: 'type',
    label: '类型',
    component: 'Input',
    colProps: { span: 22 },
    helpMessage: '操作列按钮，如需放置修改、删除按钮，可在操作列中定义同样名称的按钮',
    slot: 'type',
  },
  {
    field: 'imgWidth',
    label: '图片宽',
    component: 'Input',
    defaultValue: '100%',
    colProps: { span: 22 },
    ifShow: (values) => values.type == 'flex',
  },
  {
    field: 'imgHeight',
    label: '图片高',
    defaultValue: '80px',
    component: 'Input',
    colProps: { span: 22 },
    ifShow: (values) => values.type == 'flex',
  },
  {
    field: 'fontColor',
    label: '字体颜色',
    component: 'ColorPicker',
    colProps: { span: 22 },
    componentProps: {
      format: 'rgba',
    },
    slot: 'fontColor',
  },
  {
    field: 'bgColor',
    label: '背景颜色',
    component: 'ColorPicker',
    colProps: { span: 22 },
    defaultValue: '#fff',
    componentProps: {
      format: 'rgba',
    },
    slot: 'bgColor',
  },
  {
    field: 'fontIcon',
    label: '字体图标',
    component: 'Select',
    colProps: { span: 22 },
    slot: 'fontIcon',
  },
  {
    field: 'align',
    label: '对齐',
    component: 'Input',
    colProps: { span: 22 },
    slot: 'align',
  },
  {
    field: 'label',
    label: '标题',
    component: 'Input',
    helpMessage:
      '标题中可加入%s，用以替换为字段的值，如果含有%s，则不再输出字段值；如果为组合式，则可通过{$field}引入字段值或者也可以使用算式',
    colProps: { span: 22 },
    ifShow: ({ values }) => values.type != 'button',
  },
  {
    field: 'fontSize',
    label: '字体大小',
    component: 'Input',
    colProps: { span: 22 },
    slot: 'fontSize',
  },
  {
    field: 'overflowHide',
    label: '超出隐藏',
    component: 'Checkbox',
    colProps: { span: 22 },
  },
  {
    field: 'bgImgUrl',
    label: '背景图片',
    component: 'Input',
    colProps: { span: 22 },
    slot: 'bgImgUrl',
  },
  {
    field: 'bgImg',
    label: '上传背景图片',
    component: 'Input',
    colProps: { span: 22 },
    slot: 'bgImg',
  },
];

export const typeOptions = [
  {
    label: '字段',
    value: 'field',
  },
  {
    label: '前端图片',
    value: 'img',
  },
  {
    label: '标题',
    value: 'text',
  },
  {
    label: '操作列按钮',
    value: 'button',
  },
  {
    label: '组合',
    value: 'comb',
  },
  {
    label: '线条',
    value: 'line',
  },
  {
    label: '空白',
    value: 'block',
  },
  {
    label: '左侧图片',
    value: 'flex',
  },
];

export const alignOptions = [
  {
    label: '居左',
    value: 'left',
  },
  {
    label: '居中',
    value: 'center',
  },
  {
    label: '居右',
    value: 'right',
  },
];
const block = {
  data_x: 0,
  data_y: 0,
  data_width: 1,
  data_height: 1,
  data_minWidth: 1,
  data_maxWidth: 12,
  data_maxHeight: 1,
  innerHtml: '',
  blockId: '',
  type: 'block',
  isBold: false,
  overflowHide: false,
  fontSize: '',
  align: 'left',
  bgImgUrl: '',
  fontIcon: '',
  bgColor: '',
  fontColor: '',
  imgUrl: '',
  fieldName: '',
  label: '空白',
  paddingLeft: '',
  paddingRight: '',
  paddingTop: '',
  paddingBottom: '',
  imgWidth: '',
  imgHeight: '',
};
//设置空白块
const setBlock = (list, column) => {
  console.log('setBlock', list);
  let _list: any[] = [...list];
  let ys = list.map((item) => item.data_y);
  ys = [...new Set(ys)];
  console.log('ys', ys);
  ys.forEach((el) => {
    console.log('el', el);
    const temp = list.filter((item) => item.data_y == el);
    console.log('temp', temp);
    const wTotals = temp
      .map((item) => item.data_width)
      .reduce((prev, next) => {
        prev += next;
        return prev;
      }, 0);
    console.log('wTotals', wTotals);
    if (wTotals != 12) {
      let hadBlocks: any[] = []; //已选区间
      const noBlocks: any[] = []; //未选区间
      temp.forEach((t) => {
        hadBlocks.push({
          x: t.data_x,
          w: t.data_width,
          y: t.data_y,
          x2: t.data_x + t.data_width,
        });
        hadBlocks = hadBlocks.sort((a, b) => {
          return a.x - b.x;
        });
      });
      hadBlocks.forEach((h, hi, arr) => {
        if (hi == 0) {
          if (h.x != 0) {
            noBlocks.push({
              ...block,
              blockId: buildUUID(),
              data_x: 0,
              data_y: h.y,
              data_width: h.x,
            });
          }
        } else {
          if (h.x > arr[hi - 1].x2) {
            noBlocks.push({
              ...block,
              blockId: buildUUID(),
              data_x: arr[hi - 1].x2,
              data_y: h.y,
              data_width: h.x - arr[hi - 1].x2,
            });
          }
        }

        if (hi == arr.length - 1 && h.x2 != column) {
          noBlocks.push({
            ...block,
            blockId: buildUUID(),
            data_x: h.x2,
            data_y: h.y,
            data_width: column - h.x2,
          });
        }
      });
      _list = _list.concat(noBlocks);
      console.log('hadBlocks', hadBlocks);
      console.log('noBlocks', noBlocks);
    }
    console.log('setBlock_list', _list);
  });
  return _list;
};

export const getData = (list) => {
  const _list: Recordable[] = [];
  let num = 0;
  if (isArray(list)) {
    list.forEach((item) => {
      if (isArray(item.blocks) && item.blocks.length) {
        item.blocks.forEach((el) => {
          _list.push({
            y: item.rowNum,
            record: el,
            x: el.x,
            w: el.width,
            h: 1,
            i: num++,
            static: false,
            minH: 1,
            maxH: 1,
            isBold: el.isBold == 'true' || el.isBold == true ? true : false,
            overflowHide: el.overflowHide == 'true' || el.overflowHide == true ? true : false,
          });
        });
      }
    });
  }
  console.log('getData_list', _list);
  return _list;
};

export const setData = (list, column) => {
  const _list: Recordable[] = [];
  if (isArray(list)) {
    list.forEach((item) => {
      _list.push({
        data_x: item.x,
        data_y: item.y,
        data_width: item.w,
        data_height: item.h,
        data_minWidth: 1,
        data_maxWidth: 12,
        data_maxHeight: 1,
        innerHtml: item.record.innerHtml || '',
        blockId: item.record.blockId || '',
        type: item.record.type || '',
        isBold: item.record.isBold == 'true' || item.record.isBold == true ? true : false,
        overflowHide:
          item.record.overflowHide == 'true' || item.record.overflowHide == true ? true : false,
        fontSize: item.record.fontSize || '',
        align: item.record.align || '',
        bgImgUrl: item.record.bgImgUrl || '',
        fontIcon: item.record.fontIcon || '',
        bgColor: item.record.bgColor ? JSON.stringify(hexToRgba(item.record.bgColor)) : '',
        fontColor: item.record.fontColor ? JSON.stringify(hexToRgba(item.record.fontColor)) : '',
        imgUrl: item.record.imgUrl || '',
        fieldName: item.record.fieldName || '',
        label: item.record.label || '',
        paddingLeft: item.record.paddingLeft || '',
        paddingRight: item.record.paddingRight || '',
        paddingTop: item.record.paddingTop || '',
        paddingBottom: item.record.paddingBottom || '',
        btnName: item.record.btnName || '',
        imgWidth: item.record.imgWidth || '',
        imgHeight: item.record.imgHeight || '',
      });
    });
  }
  const data = setBlock(_list, column).sort(groupSort);
  console.log('setData_list', data);
  return data;
};

// 分组排序函数
function groupSort(a, b) {
  if (a.data_y !== b.data_y) {
    return a.data_y < b.data_y ? -1 : 1;
  } else {
    return a.data_x - b.data_x;
  }
}
